/**
 * 自定义TopButtonC组件
 * （1）入参：
 
    isShowCalc, // 试算按钮是否点亮  true --点亮 false---置灰  boolean
    isShowSave, // // 保存按钮是否点亮 true --点亮 false---置灰 boolean
    isShowDelete, // 删除按钮是否点亮 true --点亮  false---置灰 boolean
（2）出参

    onCalc：点击“试算”按钮，抛出该事件； 
    onSave：点击“保存”按钮，抛出该事件；
    onDelete：点击“删除”按钮，抛出该事件；
    

（3）实现说明：

    鼠标移动到按钮上，对应展示tooltip；
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Tooltip, Spin } from 'antd';
import { ModalC } from '../../../../comps';

import IconSave from '../../../../assets/icon/save.png';
import IconSaveDis from '../../../../assets/icon/save_disabled.png';
import IconDelete from '../../../../assets/icon/delete.png';
import IconDeleteDis from '../../../../assets/icon/delete_disabled.png';
import IconAccount from '../../../../assets/icon/account.png';
import IconAccountDis from '../../../../assets/icon/account_disabled.png';

class TopButtonC extends React.PureComponent {
  static defaultProps = {
    onRef: () => {}, // 本组件的引用
  };
  state = {
    confirmLoading: false, // 弹框按钮是否加载
    visible: false, // 弹框是否弹出
    loading: false, // 保存loading
  };
  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }
  // 计算
  calc = () => {
    if (this.props.onCalc) {
      this.props.onCalc();
    } else {
    }
  };
  // 保存
  save = () => {
    if (this.props.onSave) {
      this.props.onSave();
    } else {
    }
  };
  // 删除
  delete = () => {
    if (this.props.onDelete) {
      this.props.onDelete();
    } else {
    }
    this.setState({
      confirmLoading: false, // 弹框按钮是否加载
      visible: false, // 弹框是否弹出
    });
  };
  render() {
    const { isShowCalc, isShowSave, isShowDelete, isLoading, deleteMsg } = this.props;
    const { confirmLoading, visible } = this.state;
    const ModalCProps = {
      visible: visible,
      onOk: this.delete,
      onCancel: () => {
        this.setState({ visible: false });
      },
      title: '',
      width: 300,
      confirmLoading: confirmLoading,
    };
    return (
      <div
        style={{
          width: '100%',
          height: '30px',
          paddingTop: '7px',
          paddingBottom: '7px',
          minWidth: '96px',
          display: 'flex',
          justifyContent: 'flex-end',
        }}
      >
        <Tooltip placement='top' title='试算'>
          <a
            onClick={this.calc}
            disabled={!isShowCalc}
            style={{
              marginLeft: '20px',
              width: '16px',
              height: '16px',
            }}
          >
            {' '}
            <img style={{ height: '100%', width: '100%', marginTop: '-8px' }} src={isShowCalc ? IconAccount : IconAccountDis} />
          </a>
        </Tooltip>
        <Tooltip placement='top' title='保存'>
          <a
            onClick={this.save}
            disabled={!isShowSave || isLoading}
            style={{
              marginLeft: '20px',
              width: '16px',
              height: '16px',
            }}
          >
            <Spin spinning={isLoading}>
              <img style={{ height: '100%', width: '100%', marginTop: '-8px' }} src={isShowSave ? IconSave : IconSaveDis} />
            </Spin>
          </a>
        </Tooltip>
        <Tooltip placement='top' title='删除'>
          <a
            onClick={() => {
              this.setState({ visible: true, confirmLoading: false });
            }}
            disabled={!isShowDelete}
            style={{
              marginLeft: '20px',
              width: '16px',
              height: '16px',
            }}
          >
            <img style={{ height: '100%', width: '100%', marginTop: '-8px' }} src={isShowDelete ? IconDelete : IconDeleteDis} />
          </a>
        </Tooltip>
        <ModalC {...ModalCProps}>{deleteMsg ? <p>{deleteMsg}</p> : <p>确认删除？</p>}</ModalC>
      </div>
    );
  }
}

// props类型
TopButtonC.propsTypes = {
  isShowCalc: PropTypes.bool, // 试算按钮是否点亮
  isShowSave: PropTypes.bool, // 保存按钮是否点亮
  isShowDelete: PropTypes.bool, // 删除按钮是否点亮
  onCalc: PropTypes.func, // 点击“试算”按钮，抛出该事件；
  onSave: PropTypes.func, // 点击“保存”按钮，抛出该事件
  onDelete: PropTypes.func, // 点击“删除”按钮，抛出该事件
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
};

export default TopButtonC;
